<template>
  <button :class="classnames(`button-${type}`, { block, link })">
    <slot />
  </button>
</template>

<script setup>
import { toRefs } from "vue";
import classnames from "classnames";
const props = defineProps({
  type: {
    type: String, //''|'default'|"primary" | "success" | "warning",'danger'
    default: "",
  },
  block: {
    type: Boolean,
    default: false,
  },
  link: {
    type: Boolean,
    default: false,
  },
});
const { type, block, link } = toRefs(props);
</script>

<style lang="scss" scoped>
* {
  --defaultOne: rgba(231, 231, 231, 1);
  --defaultTwo: rgba(220, 220, 220, 1);
  --defaultThree: rgba(166, 166, 166, 1);
  --defaultFour: rgba(238, 238, 238, 1);
  //主色
  --primaryOne: rgba(0, 82, 217, 1);
  --primaryTwo: rgba(54, 110, 244, 1);
  --primaryThree: rgba(0, 60, 171, 1);
  --primaryFour: rgba(181, 199, 255, 1);
  --primaryFive: rgba(217, 225, 255, 1);
  --primarySix: rgba(242, 243, 255, 1);
  // 错误
  --dangerOne: rgba(213, 73, 65, 1);
  --dangerTwo: rgba(246, 104, 93, 1);
  --dangerThree: rgba(173, 53, 47, 1);
  --dangerFour: rgba(255, 185, 176, 1);
  --dangerFive: rgba(255, 216, 210, 1);
  --dangerSix: rgba(255, 240, 237, 1);
  //成功
  --successOne: rgba(43, 164, 113, 1);
  --successTwo: rgba(86, 192, 141, 1);
  --successThree: rgba(0, 136, 88, 1);
  --successFour: rgba(146, 218, 178, 1);
  --successFive: rgba(198, 243, 215, 1);
  --successSix: rgba(227, 249, 233, 1);
  //警告色
  --warningOne: rgba(227, 115, 24, 1);
  --warningTwo: rgba(250, 149, 80, 1);
  --warningThree: rgba(190, 90, 0, 1);
  --warningFour: rgba(255, 185, 140, 1);
  --warningFive: rgba(255, 217, 194, 1);
  --warningSix: rgba(255, 241, 233, 1);

  --whiteColor: rgb(255, 255, 255);
  --whiteColorOne: rgba(255, 255, 255, 0.9);
  --blackColor: rgba(0, 0, 0);
  --blackColorOne: rgba(0, 0, 0, 0.9);
  --outline: rgba(220, 220, 220, 1);
  --tagclosableText: rgba(153, 153, 153, 1);
}
button {
  all: unset;
  padding: 0.4rem 1.5rem;
  background-color: #fff;
  border: 0.1rem solid #d9d9d9;
  border-width: 0.1rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
  border-radius: 0.6rem;
  height: 32px;
  font-size: 14px;
  box-sizing: border-box;
  cursor: pointer;
  outline: 0;
  & + button {
    margin-left: 12px;
  }
  &.block {
    width: 100%;
    text-align: center;
    & + button {
      margin-left: 0px;
    }
  }
  &.button {
    &-default {
      background: rgb(231, 231, 231);
      color: var(--blackColorOne);
      border: 1px solid rgb(220, 223, 230);
    }
    &-primary {
      color: var(--whiteColor);
      background-color: var(--primaryOne);
      border-color: var(--primaryOne);
      &:active {
        color: var(--whiteColor);
        border-color: var(--primaryThree);
        background-color: var(--primaryThree);
      }
      &:focus,
      &:hover {
        color: var(--whiteColor);
        background-color: var(--primaryTwo);
      }
    }
    &-success {
      color: var(--whiteColor);
      background-color: var(--successOne);
      border-color: var(--successOne);

      &:focus,
      &:hover {
        color: var(--whiteColor);
        background-color: var(--successTwo);
      }

      &:active {
        color: var(--whiteColor);
        border-color: var(--successThree);
        background-color: var(--successThree);
      }
    }
    &-warning {
      color: var(--whiteColor);
      background-color: var(--warningOne);
      border-color: var(--warningOne);

      &:focus,
      &:hover {
        color: var(--whiteColor);
        background-color: var(--warningTwo);
      }

      &:active {
        color: var(--whiteColor);
        border-color: var(--warningThree);
        background-color: var(--warningThree);
      }
    }
    &-danger {
      color: var(--whiteColor);
      background-color: var(--dangerOne);
      border-color: var(--dangerOne);

      &:focus,
      &:hover {
        color: var(--whiteColor);
        background-color: var(--dangerTwo);
      }

      &:active {
        color: var(--whiteColor);
        border-color: var(--dangerThree);
        background-color: var(--dangerThree);
      }
    }
  }
  &.link {
    background-color: transparent;
    border: 1px solid transparent;
    &:focus,
    &:hover,
    &:active,
    &:disabled {
      background-color: transparent;
      border: 1px solid transparent;
    }

    &.button {
      &-primary {
        color: var(--primaryOne);
        &:focus,
        &:hover {
          color: var(--primaryTwo);
        }
        &:active {
          color: var(--primaryThree);
        }
        &:disabled {
          color: var(--primaryFour);
        }
      }
      &-success {
        color: var(--successOne);
        &:focus,
        &:hover {
          color: var(--successTwo);
        }
        &:active {
          color: var(--successThree);
        }
        &:disabled {
          color: var(--successFour);
        }
      }
      &-warning {
        color: var(--warningOne);
        &:focus,
        &:hover {
          color: var(--warningTwo);
        }
        &:active {
          color: var(--warningThree);
        }
        &:disabled {
          color: var(--warningFour);
        }
      }
      &-danger {
        color: var(--dangerOne);
        &:focus,
        &:hover {
          color: var(--dangerTwo);
        }
        &:active {
          color: var(--dangerThree);
        }
        &:disabled {
          color: var(--dangerFour);
        }
      }
    }
  }
}
</style>
